<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3A30-documentation%3A30-component_reference%3Asamples.js"></script>
<div class="shadow">

  <div class="contents">

    <h2>ButtonComponent</h2>

    <h3>Description</h3>
    <p>
    Generates a button to execute a custom command and/or trigger a server action
    </p>

    <h3>Methods</h3>

    <dl class="documentation">
      <dt>enable()</dt>
      <dd>Enables the button.</dd>

      <dt>disable()</dt>
      <dd>Disables the button.</dd>

      <dt>setLabel(text)</dt>
      <dd>Modifies the text label of the button.</dd>
    </dl>

    <h3>Options</h3>

    <dl class="documentation">
      <dt>name</dt>
      <dd>The name of the component</dd>

      <dt>type</dt>
      <dd><code>button</code></dd>

      <dt>listeners</dt>
      <dd><i>Array - </i> Parameters who this component will react to</dd>

      <dt>htmlObject</dt>
      <dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

      <dt>refreshPeriod</dt>
      <dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

      <dt>label</dt>
      <dd>Text to be used on the generated button (only used if htmlObject points to a div/span)</dd>

      <dt>buttonStyle</dt>
      <dd>The style of the button to render. Possible values: classic and themeroller. Default: themeroller</dd>

      <dt>expression</dt>
      <dd>Javascript code to be executed when the button is clicked. It the expression evaluates to false, the Action Datasource is not called.</dd>

      <dt>executeAtStart</dt>
      <dd>True to execute the component at start, false otherwise</dd>

      <dt>preExecution</dt>
      <dd><i>Function - </i> Function to be called before the component is executed</dd>

      <dt>postExecution</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>preChange</dt>
      <dd><i>Function(value) - </i> Function to be called before the component is changed</dd>

      <dt>postChange</dt>
      <dd><i>Function(value) - </i> Function to be called after the component is changed</dd>

      <dt>actionDefinition</dt>
      <dd>Datasource to be called when the button is clicked. If the server call is successful, successCallback is called, otherwise failureCallback is called. Optional.</dd>

      <dt>successCallback</dt>
      <dd><i>Function(resultset) </i> Function to be called when the call to the datasource defined in actionDefinition is successful. Optional.</dd>

      <dt>failureCallback</dt>
      <dd><i>Function - </i> Function to be called when the call to the datasource defined in actionDefinition fails. Optional.</dd>

      <dt>tooltip</dt>
      <dd>Tooltip to be displayed when mouse hovers</dd>
    </dl>

    <h3>Sample</h3>

    <div id="example" class="flora">
      <ul>
        <li><a href="#sample"><span>Sample</span></a></li>
        <li><a href="#code"><span>Code</span></a></li>
      </ul>
      <div id="sample">
        <div id="sampleObject"></div>
        <br/>
      </div>

      <div id="code">
        <textarea cols="80" rows="40" id="samplecode">
require(['cdf/Dashboard.Blueprint', 'cdf/components/ButtonComponent'],
  function(Dashboard, ButtonComponent) {

    var dashboard = new Dashboard();

    dashboard.addComponent(new ButtonComponent({
      name: "buttonComponent",
      type: "button",
      listeners:[],
      htmlObject: "sampleObject",
      label: "A button",
      expression: function() {
        this.setLabel('Yes, a clickable button');
        alert('Button was clicked');
      },
      executeAtStart: true,
      preChange: function() { return true; },
      postChange: function() { return true; },
      successCallback: function(data) {},
      failureCallback: function() {},
      tooltip: "My first dashboard"
    }));
    dashboard.init();
});
        </textarea>
        <br/>
        <button id="tryMe">Try me</button>
      </div>
    </div>
  </div>
</div>